<template>
    <div class="containerr">
        <div :data="lastUpdateTime" class="updateTimeCls">
            数据更新时间:&nbsp {{ lastUpdateTime }}
        </div>
        <div :data="todayData" class="today" :style="{ backgroundImage: `url(${getBackgroundImage(todayData)})` }">
            <div>
                <span style="font-size:30px">{{ todayData.low }}/{{ todayData.high }}</span>
                ℃ &nbsp{{ getWeatherShow(todayData) }}
            </div>
            <div style="margin-top: 10px;">
                {{ todayData.windDirection }}风 {{ todayData.windScale }}级 | 湿度 {{ todayData.humidity }}%
            </div>
        </div>
        <hr>
        <div class="todayAfter">
            <div :data="tomorrowData" class="tomorrow">
                <div style="display: flex;">
                    <div>明天</div>
                    <div style="margin-left:auto">{{ tomorrowData.textDay }}</div>
                </div>
                <div>
                    {{ tomorrowData.low }}/{{ tomorrowData.high }}℃
                </div>
            </div>
            <div :data="dayAfterTomorrow" class="dayAfterTomorrow">
                <div style="display: flex;">
                    <div>后天</div>
                    <div style="margin-left:65px">{{ dayAfterTomorrow.textDay }}</div>
                </div>
                <div>
                    {{ dayAfterTomorrow.low }}/{{ dayAfterTomorrow.high }}℃
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import type { WeatherInfo } from '@/api/city/city';
import { ref, reactive, computed } from 'vue'
const props = withDefaults(defineProps<{
    weatherInfo: WeatherInfo
}>(), {
})
// 使用 computed 来获取 daily 数组的第一条数据。（解构）
const lastUpdateTime = computed(() => props.weatherInfo.lastUpdate);
const todayData = computed(() => props.weatherInfo.daily[0]);
const tomorrowData = computed(() => props.weatherInfo.daily[1]);
const dayAfterTomorrow = computed(() => props.weatherInfo.daily[2]);
// 定义一个方法来获取背景图片路径
const getBackgroundImage = (data: any) => {
    // 根据 data 的值返回相应的图片路径
    switch (isNight() ? data.codeNight : data.codeDay) {
        case '0' || '1' || '2' || '3':
            return '/wheather/sunny.jpeg';
        case '4' || '5' || '6' || '7' || '8' || '9':
            return '/wheather/cloudy.jpeg';
        case '10' || '11' || '12' || '13':
            return '/wheather/lightRain.jpeg';
        case '14' || '15' || '16' || '17' || '18' || '19':
            return '/wheather/rain.png';
        case '20' || '21' || '22' || '23' || '24' || '25':
            return '/wheather/snowy.jpeg'
        default:
            return '/wheather/default.jpg';
    }
};
const getWeatherShow = (data: any) => {
    return isNight() ? data.textNight : data.textDay;
}
const isNight = () => {
    // 获取当前时间
    const now = new Date();
    // 获取当前的小时数
    const currentHour = now.getHours();
    return currentHour >= 18;
}
</script>
<style scoped>
.containerr {
    width: 300px;
    height: 300px;
    font-size: 17px;
    padding: 5px;
    border-top: solid 1px;
}
.updateTimeCls {
    margin-bottom: 8px;
    font-size: small;
}
.today {
    height: 75%;
    padding: 5px;
    color: white;
}

.todayAfter {
    display: flex;
}

.tomorrow {
    width: 50%;
    border-right: solid 1px;
    padding: 5px;
}

.dayAfterTomorrow {
    padding: 5px;
}
</style>